Vue.js 移入mouseenter显示当前内容 |
您所在的位置：网站首页 › vue @mouseenter › Vue.js 移入mouseenter显示当前内容 |
Vue.js 移入mouseenter显示当前内容
|
样式比较丑，勿喷！ 鼠标移到第二个，左边背景就显示当前内容。 鼠标移到第三个，左边背景就显示当前内容。 如下图：
window.vue 组件：就是要显示内容的组件。 div{ /*width: 100px;*/ height: 20px; background-color: #138a97; color:#fff; /*子绝父相定位*/ position: absolute; bottom:0; left:20px; } {{content}} export default { data(){ return{ } }, // 父组件传给子组件的内容 props:["content"] }
Hello.vue组件： {{item.id}}{{item.item}} // 引入window组件 import window from './window.vue' export default { data () { return { content:"", ishow:null, list:[ {id:1,item:"男人歌"}, {id:2,item:"唱歌的孩子"}, {id:3,item:"失恋重修手册"}, {id:4,item:"paper love"}, {id:5,item:"oops"}, {id:6,item:"wild one"}, ] } }, methods:{ aaa(index){ this.content = this.list[index].item this.ishow = index } }, components:{ // 子组件引入 window } } li{ list-style: none; height:50px; border:1px solid #2c3e50; /*定位，显示的内容才能出现才固定位置*/ position: relative; }
本人偷懒，用的是 vue-cli脚手架快速搭个框架，也就两个vue而已。
|
【本文地址】